<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Book Management</title>
    </head>

    <body>
        <script src="../src/Vue2/vue.js"></script>
        <div id="app">
            <h1>sudo-dqr的书架</h1>
            <ul v-for="book in bookList" :key="book.id">
                <li>
                    <span>{{book.name}}</span>
                    <span>{{book.author}}</span>
                    <button @click="del(book.id)">delete</button>
                </li>
            </ul>
        </div>
        <script>
            const app = new Vue({
                el: '#app',
                data: {
                    bookList: [
                        {id: 1, name: 'Vue.js实战', author: '梁灏'},
                        {id: 2, name: 'JavaScript高级程序设计', author: 'Nicholas C.Zakas'},
                        {id: 3, name: 'JavaScript权威指南', author: 'David Flanagan'},
                        {id: 4, name: 'CSS揭秘', author: 'Lea Verou'},
                    ]
                },
                methods: {
                    del(id) {
                        this.bookList = this.bookList.filter(book => book.id !== id)
                        console.log('delete', id)
                    }
                },
            })
        </script>
    </body>
</html>
